<template>
  <view>
    <view style="padding: 5rpx; background-color: #eee;">
      <NewsCardView 
        v-for="(item, index) in newsList" 
        :key="index"
        :showImage="item.image"
        :title="item.title"
        :isTop="item.isTop"
        :author="item.author"
        :comments="item.comments"
        :time="item.time"
        :mode="item.newstype"
        :images="item.imagelist"
        :showSearch="item.showSearch"
        :bgColor="item.bgcolor"
      >
        <template v-slot:tips>
          <view class="slotcontent">
            <text>搜索: </text>
            <view class="borderbox"><text>今日金价</text></view>
            <view class="borderbox"><text>精选好物</text></view>
          </view>
        </template>
      </NewsCardView>
    </view>
  </view>
</template>

<script>
import NewsCardView from '../../components/NewsCardView.vue';
// 导入 JSON 数据文件
import newsData from '../../Data/news.json';

export default {
  components: {
    NewsCardView
  },
  data() {
    return {
      newsList: []
    };
  },
  onLoad() {
    // 将 JSON 数据赋值给新闻列表变量
    this.newsList = newsData;
    console.log("onLoad--> 从 JSON 导入的新闻数量: " + this.newsList.length);
  },
  methods: {}
};
</script>

<style scoped>
.slotcontent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
  color: #6699ff;
  font-size: 20rpx;
  margin-top: 8rpx;
}
.borderbox {
  margin: 0 5px;
  padding: 2rpx 10rpx;
  border-radius: 15rpx;
  border: 1px solid #dddddd;
}
</style>